<template>
  <bread>
    <bread-item to="/">首页</bread-item>
    <bread-item v-if="category.top" :to="`/category/${category.top.id}`" :key="category.top.id">
      {{ category.top.name }}</bread-item>
    <transition name="fade-right" mode="out-in">
      <bread-item v-if="category.sub" :key="category.sub.id">{{
        category.sub.name
      }}</bread-item>
    </transition>
  </bread>
</template>

<script>
  import {
    useRoute
  } from "vue-router";
  import {
    useStore
  } from "vuex";
  import {
    computed
  } from "vue";
  export default {
    name: "SubBread",
    setup() {
      //Vuex拿数据
      const route = useRoute();
      const store = useStore();
      const category = computed(() => {
        const cate = {};
        store.state.catagory.catagory.forEach((item) => {
          if (item.children) {
            const subItem = item.children.find(
              (sub) => sub.id === route.params.id
            );
            if (subItem) {
              cate.top = {
                id: item.id,
                name: item.name
              };
              cate.sub = {
                id: subItem.id,
                name: subItem.name
              };
            }
          }
        });
        return cate;
      });
      return {
        category
      };
    },
  };

</script>

<style lang="less" scoped>
</style>
